<template>
    <div>
      <video ref="video" autoplay></video>
      <canvas ref="canvas" style="display: none;"></canvas>
    </div>
  </template>
  
  <script>
  export default {
    mounted() {
      // Get the video and canvas elements from the template
      const video = this.$refs.video
      const canvas = this.$refs.canvas
  
      // Check if the getUserMedia method is supported by the browser
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        // Request access to the user's camera
        navigator.mediaDevices.getUserMedia({ video: true })
          .then(stream => {
            // Set the video element as the source of the media stream
            video.srcObject = stream
            video.play()
  
            // Set up the canvas element for QR code scanning
            const ctx = canvas.getContext('2d')
            const qrScanner = new QrScanner(video, result => {
              console.log('Scanned content:', result)
            })
            qrScanner.start()
  
            // Draw the video frame on the canvas for QR code scanning
            const drawFrame = () => {
              canvas.width = video.videoWidth
              canvas.height = video.videoHeight
              ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
              requestAnimationFrame(drawFrame)
            }
            requestAnimationFrame(drawFrame)
          })
          .catch(error => {
            console.error('Error accessing camera:', error)
          })
      } else {
        console.error('getUserMedia is not supported by this browser.')
      }
    }
  }
  </script>